<template>
    <fieldset>
        <legend><h2>动态组件</h2></legend>
        <button @click="actionBtn">点击切换组件</button>
        <keep-alive exclude="Child2" >
        <component :is="hh"></component>
        </keep-alive>
    </fieldset>
</template>

<script>
    import Child1 from "../components/Child1";
    import Child2 from "../components/Child2";
    import Child3 from "../components/Child3";
    export default {
        name: "Action-component",
        data:()=>{
          return{
              arr:["Child1","Child2","Child3"],
              msg:0,
          }
        },
        methods:{
            actionBtn(){
               this.msg= (++this.msg)%3;
            }
        },
        computed:{
        hh(){
            return this.arr[this.msg]
        }
        },
        components:{
            Child1, Child2, Child3,
        }
    }
</script>

<style scoped>

</style>
<!--缓存组件  保存组件再被切换的时候不会被销毁
1,keep-alive 默认缓存所有组件
2 可以通过给keep-alive设置属性 拉选择性的缓存组
2.1include属性,写在那个组件名,就缓存谁,不写就不缓存:值可以是字符串,可以写多个名字以,逗号隔开,也可以写正则和数组
2.2 exclude属性,写谁表示不缓存谁,不写的则缓存
-->
`
